<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 关键字 -->
    <meta name="keywords" content="纽曼官网，纽曼电器">
    <!-- 描述 -->
    <meta name="description" content="该网站为纽曼公司的一个产品展示网站。">
    <!-- 渲染 -->
    <meta name="render" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>产品中心</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="./product.css">
    <!-- 网站小图标 -->
    <link rel="shortcut icon" href="./images/logo.png" type="png/x-icon">
</head>

<body>
    <!-- 导航栏 -->
    <header>
        <h1><a href="../index/index.html"><img src="./images/logo.jpg" alt="logo" class="logo"></a></h1>
        <ul class="nav">
            <li><a href="../index/index.html">企业首页</a></li>
            <li><a href="../about/about.html">关于我们</a></li>
            <li><a href="../news/news.html">新闻中心</a></li>
            <li class="action"><a href="../product/product.html">产品中心</a></li>
            <li><a href="../service/service.html">客户服务</a></li>
            <li><a href="../contact/contact.html">联系我们 </a></li>
        </ul>
        <ul class="language">
            <li>CN</li>
            <li>EN</li>
        </ul>
    </header>
    <!-- 单张图片的banner -->
    <div class="banner">
        <ul class="imgs">
            <li><a href="./news.html"><img src="./images/banner.jpg" alt="banner"></a></li>
        </ul>
    </div>
    <!-- news内容区 -->
    <div class="container">
        <!-- 侧边栏 -->
        <aside>
            <!-- 导航栏 -->
            <div class="aside-title-nav">
                <div class="aside-title">
                    <h2 class="title">production</h2>
                    <p>产品中心</p>
                </div>
                <ul class="aside-nav">
                    <li><a href="#"> <i>·</i> 饮水机&nbsp;&nbsp;&nbsp;>></a></li>
                    <li><a href="#"> <i>·</i> 冰箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>></a></li>
                    <li><a href="#"> <i>·</i> 洗衣机&nbsp;&nbsp;&nbsp;>></a></li>
                    <li><a href="#"> <i>·</i> 空调&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>></a></li>
                    <li class="aside-active"><a href="#"> <i>·</i> 其他&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;>></a>
                    </li>
                    <!-- 用i标签将 . 包裹便于对其操作 -->
                </ul>
            </div>
            <!-- 搜索框 -->
            <div class="search">
                <div class="aside-title">
                    <h2 class="title">SEARCH</h2>
                    <p>搜索</p>
                </div>
                <form action="#">
                    <input type="search">
                    <img src="./images/iconfont-fangdajing.png" alt="search" class="iconfont-search">
                </form>
            </div>
        </aside>

        <div class="container-content">
            <!-- 内容区上部标题+导航 -->
            <div class="content-title">
                <h3>
                    <span class="title-chinese">产品中心</span>
                    <span class="title-english">production</span>
                </h3>
                <div class="crumbs-nav">
                    您当前的位置&nbsp;&nbsp;&gt; <a href="../index/index.html">首页</a> &nbsp;&nbsp;&gt;<span
                        class="action">产品中心</span>
                </div>
            </div>
            <!-- 产品内容 -->
            <ul class="product-imgs">
                <li><a href="product-details.html"><img src="images/product-02.jpg" alt="product"><span
                            class="pro-title">微波炉-MA323BFS</span></a></li>
                <li><a href="product-details.html"><img src="images/product-01.jpg" alt="product"><span
                            class="pro-title">饮水机-NC-ZA1</span></a></li>
                <li><a href="product-details.html"><img src="images/product-03.jpg" alt="product"><span
                            class="pro-title">迷你音响-RS-168</span></a></li>
                <li><a href="product-details.html"><img src="images/product-04.jpg" alt="product"><span
                            class="pro-title">电饭锅-RC-10ZWH</span></a></li>
                <li><a href="product-details.html"><img src="images/product-05.jpg" alt="product"><span
                            class="pro-title">空气清新机-FES-547</span></a></li>
                <li><a href="product-details.html"><img src="images/product-06.jpg" alt="product"><span
                            class="pro-title">电热水器-ARC-1</span></a></li>
                <li><a href="product-details.html"><img src="images/product-07.jpg" alt="product"><span
                            class="pro-title">迷你风扇-HES-1483</span></a></li>
                <li><a href="product-details.html"><img src="images/product-08.jpg" alt="product"><span
                            class="pro-title">迷你风扇-HE-1359</span></a></li>
                <li><a href="product-details.html"><img src="images/product-09.jpg" alt="product"><span
                            class="pro-title">智能吸尘器-DE-137</span></a></li>
                <li><a href="product-details.html"><img src="images/product-10.jpg" alt="product"><span
                            class="pro-title">打印机-DJ-360</span></a></li>
                <li><a href="product-details.html"><img src="images/product-11.jpg" alt="product"><span
                            class="pro-title">饮水机-NC-648</span></a></li>
                <li><a href="product-details.html"><img src="images/product-12.jpg" alt="product"><span
                            class="pro-title">电驱虫器-DQ-173</span></a></li>
            </ul>
            <!-- 底部分页 -->
            <ul class="pages">
                <li><a href="#">&lt;&nbsp;上一页</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">...</a></li>
                <li><a href="#">下一页&nbsp;&gt;</a></li>
            </ul>
        </div>
    </div>
    <!-- footer -->
    <footer>
        <div class="footer">
            <div class="footer-content">
                <div class="footer-nav">
                    <dl>
                        <dt> <a href="#">关于我们</a> </dt>
                        <dd> <a href="#">公司简介</a> </dd>
                        <dd> <a href="#">企业文化</a> </dd>
                        <dd> <a href="#">企业荣誉</a> </dd>
                        <dd> <a href="#">资格认证</a> </dd>
                        <dd> <a href="#">研发生产</a> </dd>
                    </dl>
                    <dl>
                        <dt> <a href="#">产品中心</a> </dt>
                        <dd> <a href="#">饮水机</a> </dd>
                        <dd> <a href="#">冰箱</a> </dd>
                        <dd> <a href="#">洗衣机</a> </dd>
                        <dd> <a href="#">空调</a> </dd>
                        <dd> <a href="#">其他产品</a> </dd>
                    </dl>
                    <dl>
                        <dt> <a href="#">新闻中心</a> </dt>
                        <dd> <a href="#">最新动态</a> </dd>
                        <dd> <a href="#">企业新闻</a> </dd>
                        <dd> <a href="#">行业新闻</a> </dd>
                        <dd> <a href="#">热点聚焦</a> </dd>
                    </dl>
                    <dl>
                        <dt> <a href="#">客户服务</a> </dt>
                        <dd> <a href="#">招商加盟</a> </dd>
                        <dd> <a href="#">购买流程</a> </dd>
                        <dd> <a href="#">售后服务</a> </dd>
                        <dd> <a href="#">技术支持</a> </dd>
                        <dd> <a href="#">常见问题</a> </dd>
                    </dl>
                    <dl>
                        <dt> <a href="#">联系我们</a> </dt>
                        <dd> <a href="#">在线留言</a> </dd>
                        <dd> <a href="#">网上咨询</a> </dd>
                        <dd> <a href="#">联系我们</a> </dd>
                    </dl>
                </div>
                <form action="#" class="footer-contact">
                    <input type="text" name="name" placeholder="请输入您的姓名">
                    <input type="tel" name="tel" placeholder="请输入您的联系方式">
                    <textarea name="" id="" cols="30" rows="10" placeholder="请输入留言"></textarea>
                    <br>
                    <input type="submit">
                </form>
            </div>
        </div>
        <p>
            Copyright&copy;2030WenCun.com All Rights Reserved &nbsp;&nbsp; Design by WenCun 粤ICP备13005446号-1
        </p>
    </footer>
</body>

</html>